<template name="shop">
	<view class="bg-white">
		<!-- <view style="width:100%; display: block; text-align: center; padding:35% 0; font-size: 36upx; line-height: 80upx; color: #999999;">
			商城供应链...<br/>敬请关注
		</view> -->
		<scroll-view>
			<!-- 轮播 -->
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>

			<view class="goods-con" v-if="goodsList && goodsList.length>0">
				<view 
					v-for="(item, index) in goodsList" :key="item.id"
					class="guess-item"><!-- @click="navToDetailPage(item.id)" -->
					<view class="image-wrapper">
						<image :src="item.coverImg1" mode="aspectFill"></image>
					</view>
					<text class="title clamp">{{item.title}}</text>
					<view class="price-box">
						<text class="price">{{item.smallUnitSalePrice}}</text>
						<!-- <text>已售{{item.monthSaleCount}}</text> -->
						<text>已售{{item.totalSaleCount}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
			
	</view>
</template>

<script>
	import { us,os } from '@/common/util/work.js'
	import socket from '@/common/js-sdk/socket/socket.js'
	export default {
		name: 'shop',
		props:{
			cur:String,
		},
		data() {
			return {
			 swiperList: [
				  {id:1,type: 'image',url: 'https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/index-focus-5.jpg', link: ''},
				  {id:2,type: 'image',url: 'https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/index-focus-6.jpg', link: ''},
				  {id:3,type: 'image',url: 'https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/index-focus-7.jpg', link: ''},
				  {id:4,type: 'image',url: 'https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/index-focus-8.jpg', link: ''},
				],
				middleApps: [
				  {icon: 'line2_icon1.png', title: '审批', 'text': '个人审批'},
				  {icon: 'line2_icon2.png', title: '审批稿', 'text': '审批草稿箱'},
				],
				usList:us.data,
				osList:os.data,
				msgCount:0,
				dot:{
				  mailHome:false
				},
				
				goodsList: [//商品
					{id:'1001', title:'鱼跃(YUWELL)高端旗舰款电子血压计YE666AR', coverImg1:'/static/goods/good-cover-1.jpg', smallUnitSalePrice:298, totalSaleCount:33},
					{id:'1002', title:'鱼跃（YUWELL）电子血压计 家用腕式YE8800C 全自动测血压仪器', coverImg1:'/static/goods/good-cover-2.jpg', smallUnitSalePrice:119, totalSaleCount:39},
					{id:'1003', title:'鱼跃（YUWELL） 家用医用多功能听诊器可听心肺呼吸杂音胎心', coverImg1:'/static/goods/good-cover-3.jpg', smallUnitSalePrice:89, totalSaleCount:16},
					{id:'1004', title:'鱼跃（Yuwell）血糖仪家用智能免调码语音582血糖测试仪', coverImg1:'/static/goods/good-cover-4.jpg', smallUnitSalePrice:159, totalSaleCount:43},
					{id:'1005', title:'鱼跃(YUWELL)血糖试纸适用于582/586/596血糖仪', coverImg1:'/static/goods/good-cover-5.jpg', smallUnitSalePrice:119, totalSaleCount:100},
					{id:'1006', title:'鱼跃（YUWELL）血糖试纸 适用于IM100血压血糖一体机', coverImg1:'/static/goods/good-cover-6.jpg', smallUnitSalePrice:99, totalSaleCount:61},
					{id:'1007', title:'鱼跃(YUWELL)高端旗舰款电子血压计YE666AR', coverImg1:'/static/goods/good-cover-1.jpg', smallUnitSalePrice:298, totalSaleCount:33},
					{id:'1008', title:'鱼跃（YUWELL）电子血压计 家用腕式YE8800C 全自动测血压仪器', coverImg1:'/static/goods/good-cover-2.jpg', smallUnitSalePrice:119, totalSaleCount:39},
					{id:'1009', title:'鱼跃（YUWELL） 家用医用多功能听诊器可听心肺呼吸杂音胎心', coverImg1:'/static/goods/good-cover-3.jpg', smallUnitSalePrice:89, totalSaleCount:16},
					{id:'1010', title:'鱼跃（Yuwell）血糖仪家用智能免调码语音582血糖测试仪', coverImg1:'/static/goods/good-cover-4.jpg', smallUnitSalePrice:159, totalSaleCount:43},
					{id:'1011', title:'鱼跃(YUWELL)血糖试纸适用于582/586/596血糖仪', coverImg1:'/static/goods/good-cover-5.jpg', smallUnitSalePrice:119, totalSaleCount:100},
					{id:'1012', title:'鱼跃（YUWELL）血糖试纸 适用于IM100血压血糖一体机', coverImg1:'/static/goods/good-cover-6.jpg', smallUnitSalePrice:99, totalSaleCount:61},
				],
			}
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
					console.log('shop.vue watch')
				    uni.showToast({
						icon: 'none',
				        title: '商城供应链接入中...',
				        duration: 2000
				    });
				},
			},
		},
		methods: {
			initMenu(){
				console.log("-----------home------------")
			    this.onSocketOpen()
			    this.onSocketReceive()
			    this.loadCount(0);
			},
			goPage(page){
				if(!page){
					return false;
				}
				if(page==='annotationList'){
				  this.msgCount = 0
				}
				this.dot[page]=false
				this.$Router.push({name: page})
			},
			// 启动webSocket
			onSocketOpen() {
				socket.init('websocket');
			},
			onSocketReceive() {
				var _this=this
				socket.acceptMessage = function(res){
					// console.log("页面收到的消息", res);
					if(res.cmd == "topic"){
					  //系统通知
					  _this.loadCount('1')
					}else if(res.cmd == "user"){
					  //用户消息
					  _this.loadCount('2')
					} else if(res.cmd == 'email'){
					 //邮件消息
					  _this.loadEmailCount()
					}
				}
			},
			loadCount(flag){
				console.log("loadCount::flag",flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res=>{
					console.log("res::",res)
				  if(res.data.success){
					let msg1Count = res.data.result.anntMsgTotal;
					let msg2Count = res.data.result.sysMsgTotal;
					this.msgCount = msg1Count + msg2Count
					console.log("this.msgCount",this.msgCount)
				  }
				})
			},
			loadEmailCount(){
				this.dot.mailHome = true
			},
			getTtemDotInfo(item){
				if(item.page==='annotationList' && this.msgCount>0){
				  return this.msgCount
				}
				return '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-list.grid>.cu-item {
	  padding: 0px 0px; 
	}
    .line2-icon {
	  width: 60px;
	  height: 60px;
    }
	/* 推荐商品 */
	.goods-con{
		display:flex;
		flex-wrap:wrap;
		padding: 30upx;
		margin: 10upx 0 60upx 0;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			/* text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden; */
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			height: 90upx;
			line-height: 45upx;
			overflow: hidden;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $uni-text-color-grey;
			.price{
				font-size: $uni-font-size-lg;
				color: $uni-color-error;
				line-height: 1;
				&:before{
					content: '￥';
					font-size: 26upx;
				}
			}
		}
		.sale-count{
			font-size:$uni-font-size-lg;
			color: $uni-text-color;
			line-height: 1;
		}
	}
</style>
